<template>
  <div class="check-settings-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Setting /></el-icon>
          <div class="header-text">
            <h2>盘点参数设置</h2>
            <p>配置盘点流程的各项参数和规则</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleSave" :loading="saving">
            <el-icon><Select /></el-icon>
            保存设置
          </el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20">
      <!-- 基本设置 -->
      <el-col :span="12">
        <el-card shadow="never" class="settings-card">
          <div class="card-title">
            <el-icon><Tools /></el-icon>
            <span>基本设置</span>
          </div>

          <el-form :model="settings" label-width="180px">
            <el-form-item label="盘点单号规则">
              <el-select v-model="settings.sheetNoRule" style="width: 100%">
                <el-option label="CHS + 年月日 + 流水号" value="CHS_YYYYMMDD_SEQ" />
                <el-option label="CHS + 时间戳" value="CHS_TIMESTAMP" />
                <el-option label="自定义前缀 + 日期" value="CUSTOM_DATE" />
              </el-select>
            </el-form-item>

            <el-form-item label="自动生成盘点单">
              <el-switch v-model="settings.autoGenerateSheet" active-text="开启" inactive-text="关闭" />
              <div class="form-tip">开始盘点时自动创建第一张盘点单</div>
            </el-form-item>

            <el-form-item label="允许修改账面数量">
              <el-switch v-model="settings.allowModifyBookQty" active-text="允许" inactive-text="禁止" />
              <div class="form-tip">盘点时是否允许修改账面数量</div>
            </el-form-item>

            <el-form-item label="必填盈亏原因">
              <el-switch v-model="settings.requireRemark" active-text="必填" inactive-text="选填" />
              <div class="form-tip">有差异时是否必须填写原因</div>
            </el-form-item>

            <el-form-item label="差异阈值设置">
              <el-input-number v-model="settings.diffThreshold" :min="0" :step="100" />
              <span style="margin-left: 8px;">元</span>
              <div class="form-tip">超过此金额的差异需特别审核</div>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 自动化设置 -->
        <el-card shadow="never" class="settings-card" style="margin-top: 20px;">
          <div class="card-title">
            <el-icon><MagicStick /></el-icon>
            <span>自动化设置</span>
          </div>

          <el-form :model="settings" label-width="180px">
            <el-form-item label="自动审核小额差异">
              <el-switch v-model="settings.autoApproveSmallDiff" active-text="开启" inactive-text="关闭" />
              <div class="form-tip">小于设定金额的差异自动审核通过</div>
            </el-form-item>

            <el-form-item label="自动审核阈值" v-if="settings.autoApproveSmallDiff">
              <el-input-number v-model="settings.autoApproveThreshold" :min="0" :max="1000" :step="10" />
              <span style="margin-left: 8px;">元</span>
            </el-form-item>

            <el-form-item label="自动入库盘盈商品">
              <el-switch v-model="settings.autoInboundProfit" active-text="开启" inactive-text="关闭" />
              <div class="form-tip">审核通过后自动将盘盈商品入库</div>
            </el-form-item>

            <el-form-item label="自动提醒逾期任务">
              <el-switch v-model="settings.autoRemindOverdue" active-text="开启" inactive-text="关闭" />
            </el-form-item>

            <el-form-item label="提醒提前时间" v-if="settings.autoRemindOverdue">
              <el-select v-model="settings.remindBeforeDays" style="width: 100%">
                <el-option label="提前1天" :value="1" />
                <el-option label="提前2天" :value="2" />
                <el-option label="提前3天" :value="3" />
                <el-option label="提前5天" :value="5" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 高级设置 -->
      <el-col :span="12">
        <el-card shadow="never" class="settings-card">
          <div class="card-title">
            <el-icon><SetUp /></el-icon>
            <span>审核设置</span>
          </div>

          <el-form :model="settings" label-width="180px">
            <el-form-item label="启用多级审核">
              <el-switch v-model="settings.multiLevelApproval" active-text="开启" inactive-text="关闭" />
            </el-form-item>

            <el-form-item label="审核流程" v-if="settings.multiLevelApproval">
              <el-tag v-for="(level, index) in approvalLevels" :key="index" style="margin-right: 8px;">
                {{ level }}
              </el-tag>
              <el-button size="small" link type="primary">
                配置流程
              </el-button>
            </el-form-item>

            <el-form-item label="盘亏需二次复核">
              <el-switch v-model="settings.lossDoubleCheck" active-text="需要" inactive-text="不需要" />
              <div class="form-tip">盘亏商品需要重新盘点确认</div>
            </el-form-item>

            <el-form-item label="大额差异强制说明">
              <el-switch v-model="settings.largeDiffRequireDesc" active-text="强制" inactive-text="不强制" />
            </el-form-item>

            <el-form-item label="大额差异金额">
              <el-input-number v-model="settings.largeDiffAmount" :min="1000" :step="1000" />
              <span style="margin-left: 8px;">元</span>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 通知设置 -->
        <el-card shadow="never" class="settings-card" style="margin-top: 20px;">
          <div class="card-title">
            <el-icon><Bell /></el-icon>
            <span>通知设置</span>
          </div>

          <el-form :model="settings" label-width="180px">
            <el-form-item label="任务完成通知">
              <el-checkbox-group v-model="settings.taskCompleteNotify">
                <el-checkbox label="email">邮件</el-checkbox>
                <el-checkbox label="sms">短信</el-checkbox>
                <el-checkbox label="system">站内消息</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="异常预警通知">
              <el-checkbox-group v-model="settings.abnormalNotify">
                <el-checkbox label="email">邮件</el-checkbox>
                <el-checkbox label="sms">短信</el-checkbox>
                <el-checkbox label="system">站内消息</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="通知接收人">
              <el-select v-model="settings.notifyReceivers" multiple placeholder="选择接收人" style="width: 100%">
                <el-option label="仓库主管" value="warehouse_manager" />
                <el-option label="财务经理" value="finance_manager" />
                <el-option label="总经理" value="general_manager" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 数据设置 -->
        <el-card shadow="never" class="settings-card" style="margin-top: 20px;">
          <div class="card-title">
            <el-icon><DataAnalysis /></el-icon>
            <span>数据设置</span>
          </div>

          <el-form :model="settings" label-width="180px">
            <el-form-item label="历史数据保留期">
              <el-select v-model="settings.dataRetentionMonths" style="width: 100%">
                <el-option label="6个月" :value="6" />
                <el-option label="12个月" :value="12" />
                <el-option label="24个月" :value="24" />
                <el-option label="永久保留" :value="-1" />
              </el-select>
            </el-form-item>

            <el-form-item label="数据备份频率">
              <el-radio-group v-model="settings.backupFrequency">
                <el-radio label="daily">每天</el-radio>
                <el-radio label="weekly">每周</el-radio>
                <el-radio label="monthly">每月</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="导出格式">
              <el-checkbox-group v-model="settings.exportFormats">
                <el-checkbox label="excel">Excel</el-checkbox>
                <el-checkbox label="pdf">PDF</el-checkbox>
                <el-checkbox label="csv">CSV</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Setting, Select, Tools, MagicStick, Bell, DataAnalysis, SetUp
} from '@element-plus/icons-vue'

// 状态
const saving = ref(false)

// 审核层级
const approvalLevels = ref(['盘点人', '仓库主管', '财务经理'])

// 设置数据
const settings = reactive({
  // 基本设置
  sheetNoRule: 'CHS_YYYYMMDD_SEQ',
  autoGenerateSheet: true,
  allowModifyBookQty: false,
  requireRemark: true,
  diffThreshold: 5000,
  
  // 自动化设置
  autoApproveSmallDiff: true,
  autoApproveThreshold: 100,
  autoInboundProfit: false,
  autoRemindOverdue: true,
  remindBeforeDays: 2,
  
  // 审核设置
  multiLevelApproval: false,
  lossDoubleCheck: true,
  largeDiffRequireDesc: true,
  largeDiffAmount: 10000,
  
  // 通知设置
  taskCompleteNotify: ['system'],
  abnormalNotify: ['email', 'system'],
  notifyReceivers: ['warehouse_manager'],
  
  // 数据设置
  dataRetentionMonths: 12,
  backupFrequency: 'weekly',
  exportFormats: ['excel', 'pdf']
})

// 方法
const handleSave = () => {
  saving.value = true
  
  setTimeout(() => {
    saving.value = false
    ElMessage.success('设置保存成功')
  }, 1000)
}
</script>

<style scoped>
.check-settings-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.settings-card {
  margin-bottom: 20px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.form-tip {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}
</style>

